<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>2025智能点名系统</title>
    <style>
        :root {
            --neon-blue: #6e8efb;
            --hologram-pink: #ff61d6;
        }

        body {
            background: radial-gradient(circle at 50% 100%,
                    rgba(110, 142, 251, 0.2) 0%,
                    rgba(167, 119, 227, 0.4) 100%);
            font-family: 'Orbitron', sans-serif;
        }

        .cyber-board {
            width: 90%;
            margin: 2rem auto;
            padding: 2rem;
            backdrop-filter: blur(10px);
            border: 2px solid var(--neon-blue);
            box-shadow: 0 0 30px rgba(110, 142, 251, 0.3);
        }

        .particle-grid {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 1rem;
            margin: 2rem 0;
        }

        .student-card {
            background: rgba(255, 255, 255, 0.1);
            padding: 1rem;
            border: 1px solid var(--neon-blue);
            transition: transform 0.3s;
        }

        .student-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(110, 142, 251, 0.3);
        }

        .glow-button {
            background: linear-gradient(135deg, var(--neon-blue), var(--hologram-pink));
            padding: 1rem 2rem;
            border: none;
            color: white;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
    </style>
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap" rel="stylesheet">
</head>

<body>
    <div class="cyber-board">
        <!-- 动态粒子网格 -->
        <div class="particle-grid" id="studentGrid"></div>

        <!-- 控制面板 -->
        <div class="control-panel">
            <input type="number" id="pointsInput" placeholder="📈 积分调整值"
                style="background: rgba(255,255,255,0.1); color: white; padding: 1rem;">
            <button class="glow-button" onclick="startLottery()">🎲 量子点名</button>
            <button class="glow-button" onclick="updatePoints()">✨ 同步积分</button>
        </div>

        <!-- 全息数据看板 -->
        <div class="hologram-display" id="dataBoard">
            <h3>🏆 积分领袖榜（TOP5）</h3>
            <div id="leaderboard"></div>
        </div>
    </div>

    <script>
        let students = [
            // 初始数据（按原顺序补全）
            { 学号: "20250101", 姓名: "邓成龙", 积分: 150, 班级: "2025级1班", 最后活跃: "2025-02-28" },
            { 学号: "20250102", 姓名: "江宁峰", 积分: 230, 班级: "2025级1班", 最后活跃: "2025-02-27" },
            { 学号: "20250103", 姓名: "朱长明", 积分: 180, 班级: "2025级1班", 最后活跃: "2025-02-26" },

            // 续补数据集（按问题名单顺序生成）
            { 学号: "20250104", 姓名: "施成", 积分: Math.floor(Math.random() * 201) + 100, 班级: "2025级1班", 最后活跃: "2025-02-25" },
            { 学号: "20250105", 姓名: "张炳辉", 积分: Math.floor(Math.random() * 201) + 100, 班级: "2025级1班", 最后活跃: "2025-02-24" },
            { 学号: "20250106", 姓名: "武俊鹏", 积分: Math.floor(Math.random() * 201) + 100, 班级: "2025级1班", 最后活跃: "2025-02-23" },
            { 学号: "20250107", 姓名: "乐坤华", 积分: Math.floor(Math.random() * 201) + 100, 班级: "2025级1班", 最后活跃: "2025-02-22" },
            { 学号: "20250108", 姓名: "廖坚淇", 积分: Math.floor(Math.random() * 201) + 100, 班级: "2025级1班", 最后活跃: "2025-02-21" },
            { 学号: "20250109", 姓名: "谢依玲", 积分: Math.floor(Math.random() * 201) + 100, 班级: "2025级1班", 最后活跃: "2025-02-20" },
            { 学号: "20250110", 姓名: "刘胜华", 积分: Math.floor(Math.random() * 201) + 100, 班级: "2025级1班", 最后活跃: "2025-02-19" },
            { 学号: "20250111", 姓名: "徐孟辉", 积分: Math.floor(Math.random() * 201) + 100, 班级: "2025级1班", 最后活跃: "2025-02-18" },
            { 学号: "20250112", 姓名: "许晨华", 积分: Math.floor(Math.random() * 201) + 100, 班级: "2025级1班", 最后活跃: "2025-02-17" },
            { 学号: "20250113", 姓名: "谢荣鑫", 积分: Math.floor(Math.random() * 201) + 100, 班级: "2025级1班", 最后活跃: "2025-02-16" },
            { 学号: "20250114", 姓名: "蔡丽玲", 积分: Math.floor(Math.random() * 201) + 100, 班级: "2025级1班", 最后活跃: "2025-02-15" },
            { 学号: "20250115", 姓名: "郭亚平", 积分: Math.floor(Math.random() * 201) + 100, 班级: "2025级1班", 最后活跃: "2025-02-14" },
            { 学号: "20250116", 姓名: "温慧娟", 积分: Math.floor(Math.random() * 201) + 100, 班级: "2025级1班", 最后活跃: "2025-02-13" },
            { 学号: "20250117", 姓名: "雷茜", 积分: Math.floor(Math.random() * 201) + 100, 班级: "2025级1班", 最后活跃: "2025-02-12" },
            { 学号: "20250118", 姓名: "邓瑶琴", 积分: Math.floor(Math.random() * 201) + 100, 班级: "2025级1班", 最后活跃: "2025-02-11" },
            { 学号: "20250119", 姓名: "黄玉松", 积分: Math.floor(Math.random() * 201) + 100, 班级: "2025级1班", 最后活跃: "2025-02-10" },
            { 学号: "20250120", 姓名: "李浩庆", 积分: Math.floor(Math.random() * 201) + 100, 班级: "2025级1班", 最后活跃: "2025-02-09" },
            { 学号: "20250121", 姓名: "蔡学旺", 积分: Math.floor(Math.random() * 201) + 100, 班级: "2025级1班", 最后活跃: "2025-02-08" },
            { 学号: "20250122", 姓名: "周宇佺", 积分: Math.floor(Math.random() * 201) + 100, 班级: "2025级1班", 最后活跃: "2025-02-07" },
            { 学号: "20250123", 姓名: "罗明", 积分: Math.floor(Math.random() * 201) + 100, 班级: "2025级1班", 最后活跃: "2025-02-06" },
            { 学号: "20250124", 姓名: "万文轩", 积分: Math.floor(Math.random() * 201) + 100, 班级: "2025级1班", 最后活跃: "2025-02-05" },
            { 学号: "20250125", 姓名: "姜彬辉", 积分: Math.floor(Math.random() * 201) + 100, 班级: "2025级1班", 最后活跃: "2025-02-04" },
            { 学号: "20250126", 姓名: "吴展鹏", 积分: Math.floor(Math.random() * 201) + 100, 班级: "2025级1班", 最后活跃: "2025-02-03" },
            { 学号: "20250127", 姓名: "徐文娟", 积分: Math.floor(Math.random() * 201) + 100, 班级: "2025级1班", 最后活跃: "2025-02-02" },
            { 学号: "20250128", 姓名: "李舒", 积分: Math.floor(Math.random() * 201) + 100, 班级: "2025级1班", 最后活跃: "2025-02-01" },
            { 学号: "20250129", 姓名: "何慧星", 积分: Math.floor(Math.random() * 201) + 100, 班级: "2025级1班", 最后活跃: "2025-01-31" },
            { 学号: "20250130", 姓名: "任欣弘", 积分: Math.floor(Math.random() * 201) + 100, 班级: "2025级1班", 最后活跃: "2025-01-30" },
            { 学号: "20250131", 姓名: "朱林义", 积分: Math.floor(Math.random() * 201) + 100, 班级: "2025级1班", 最后活跃: "2025-01-29" },
            { 学号: "20250132", 姓名: "宋星雨", 积分: Math.floor(Math.random() * 201) + 100, 班级: "2025级1班", 最后活跃: "2025-01-28" },
            { 学号: "20250133", 姓名: "袁璐欣", 积分: Math.floor(Math.random() * 201) + 100, 班级: "2025级1班", 最后活跃: "2025-01-27" },

            // 补充名单至36人（根据常见中文姓名生成）
            { 学号: "20250134", 姓名: "陈宇航", 积分: Math.floor(Math.random() * 201) + 100, 班级: "2025级1班", 最后活跃: "2025-01-26" },
            { 学号: "20250135", 姓名: "林晓雯", 积分: Math.floor(Math.random() * 201) + 100, 班级: "2025级1班", 最后活跃: "2025-01-25" },
            { 学号: "20250136", 姓名: "王振宇", 积分: Math.floor(Math.random() * 201) + 100, 班级: "2025级1班", 最后活跃: "2025-01-24" }
        ];
        // 初始化本地存储 
        if (!localStorage.getItem('students')) {
            localStorage.setItem('students', JSON.stringify(students));
        }

        // 三维粒子动画引擎 
        function renderParticleGrid() {
            const grid = document.getElementById('studentGrid');
            const storedData = JSON.parse(localStorage.getItem('students'));

            grid.innerHTML = storedData.map(student => `
        <div class="student-card" data-id="${student.学号}">
            <h3>${student.姓名}</h3>
            <p>🪙 ${student.积分}pt</p>
            <p>📅 ${student.最后活跃}</p>
        </div>
    `).join('');
        }

        // 量子点名算法 
        function startLottery() {
            const students = JSON.parse(localStorage.getItem('students'));
            const cards = document.querySelectorAll('.student-card');

            // 启动光效动画 
            cards.forEach(card => card.style.animation = 'glow 1s infinite alternate');

            setTimeout(() => {
                const winnerIndex = Math.floor(Math.random() * students.length);
                const winnerCard = cards[winnerIndex];

                // 停止动画并高亮选中者
                cards.forEach(card => card.style.animation = '');
                winnerCard.style.transform = 'scale(1.2)';
                winnerCard.style.background = 'rgba(255,97,214,0.3)';

                // 更新最后活跃时间 
                students[winnerIndex].最后活跃 = new Date().toISOString().split('T')[0];
                localStorage.setItem('students', JSON.stringify(students));
            }, 2000);
        }

        // 积分管理系统 
        function updatePoints() {
            const points = parseInt(document.getElementById('pointsInput').value);
            const selected = document.querySelector('.student-card.highlight');


            if (selected && !isNaN(points)) {
                const studentId = selected.dataset.id;
                const students = JSON.parse(localStorage.getItem('students'));

                const target = students.find(s => s.学号 === studentId);
                target.积分 += points;

                localStorage.setItem('students', JSON.stringify(students));
                renderParticleGrid();
            }
        }

        // 首次渲染 
        renderParticleGrid();
    </script>
</body>

</html>